<template>
  <div class="element">
    <el-container>
      <el-header style="font-size: 40px; background-color: aqua"
        >智能学习
      </el-header>
      <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>导航一
              </template>
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main>
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="姓名">
                <el-input
                  v-model="formInline.name"
                  placeholder="姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="formInline.gender" placeholder="性别">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="入职日期">
                <el-date-picker
                  v-model="formInline.entrydate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" border>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="image" label="图像" width="180">
              </el-table-column>
              <el-table-column prop="gender" label="性别" width="140">
              </el-table-column>
              <el-table-column prop="job" label="职位" width="140">
              </el-table-column>
              <el-table-column prop="entrydate" label="入职日期" width="180">
              </el-table-column>
              <el-table-column
                prop="updatetime"
                label="最后操作时间"
                width="230"
              >
              </el-table-column>
              <el-table-column label="操作">
                <el-button type="primary" size="mini">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </el-table-column>
            </el-table>
            <br />
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ElementView",
  data() {
    return {
      tableData: [],
      formInline: {
        name: "",
        gender: "",
        value1: "",
        entrydate: "",
      },
    };
  },
  methods: {
    onSubmit() {
      alert("查询");
    },
    handleSizeChange() {
      alert("每页记录数变化");
    },
    handleCurrentChange() {
      alert("页码变化");
    },
  },
  mounted() {
    axios.get("").then();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-aside {
  color: #333;
}
</style>
